<template>
  <div class="clearfix">
    <!-- 搜索框 -->
    <div id="header" class="header_abs">
      <input
        id="btn_header_line"
        type="text"
        placeholder="请输入游戏名称或商品ID"
      />
    </div>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../assets/img/banner1.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item
        ><img src="../assets/img/banner2.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../assets/img/banner3.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../assets/img/banner4.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../assets/img/banner5.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../assets/img/banner6.jpg" alt=""
      /></van-swipe-item>
    </van-swipe>

    <!-- 选项卡 -->

    <van-swipe @change="onChange">
      <van-swipe-item>
        <router-link
          to="/list"
          class="swiper-slide swiper-slide-active"
          style="width: 63px; margin-right: 15px"
          v-for="(item, index) in firstlist"
          :key="index"
        >
          <a href="">
            <div id="business_cp" class="business_imgs">
              <img :src="require('../assets/' + item.route)" />
            </div>
            <div class="guide-text">{{ item.name }}</div>
          </a>
        </router-link>
      </van-swipe-item>

      <van-swipe-item>
        <div
          class="swiper-slide swiper-slide-active"
          style="width: 63px; margin-right: 15px"
          v-for="(item, index) in first"
          :key="index"
        >
          <a href="">
            <div id="business_cp" class="business_imgs">
              <img :src="require('../assets/' + item.route)" />
            </div>
            <div class="guide-text">{{ item.name }}</div>
          </a>
        </div>
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/2</div>
      </template>
    </van-swipe>

    <!-- 热门游戏 -->

    <div class="item-title">热门游戏</div>
    <div id="hotgames" class="module" style="margin-bottom: 0">
      <div class="games-content lettershow clearfix">
        <van-cell
          @click="showPopup(index)"
          v-for="(item, index) in hotgames"
          :key="index"
        >
          <div class="cat_btn_comeshow_mune">
            <div class="hotgames_imgs">
              <img :src="'https://img2.taoshouyou.com' + item.pic" />
            </div>
            <div class="gamenamediv">{{ item.name }}</div>
          </div>
        </van-cell>

        <van-popup v-model="show" position="bottom" :style="{ height: '70%' }">
          <img
            class="img1"
            v-if="hotgames.length > 0"
            :src="'https://img2.taoshouyou.com' + hotgames[i].pic"
          />
          <p class="games-type-p">请选择购买类别</p>

          <!-- 渲染的大盒子 -->
          <div>
            <!-- 渲染的小盒子 -->
            <div
              @click="goTodeailList(item,idx)"
              class="show1"
              v-for="(item, idx) in type"
              :key="idx"
            >
              <img class="type-pic" src="../assets/img/zhuanyika.png" alt="" />
              <h3>{{ item.goodsname }}</h3>
            </div>
          </div>
        </van-popup>
      </div>
      <div class="trade_jump">
        <router-link to="/list">查看更多游戏 &gt;</router-link>
      </div>
    </div>

    <!-- 专属福利 -->
    <div class="item-title">专属福利</div>
    <div class="tsy-ggw1">
      <div class="tsy-ggw1-img">
        <a href="">
          <img
            src="https://img2.taoshouyou.com/img/2020-08-12/14/ed09e1e39ff11d47aee76e8ffc85fc5e.jpg"
          />
        </a>
      </div>
      <div class="tsy-ggw1-img">
        <a href="">
          <img
            src="https://img2.taoshouyou.com/img/2020-08-24/31/057b9d91e5da34f44ebc075e7d6a9717.jpg"
          />
        </a>
      </div>
      <div class="tsy-ggw1-img">
        <a href="">
          <img
            src="https://img2.taoshouyou.com/img/2020-08-12/21/4e8dc8cb88fa6b19b1ef8582f275697b.jpg"
          />
        </a>
      </div>
      <div class="tsy-ggw1-img">
        <a href="">
          <img
            src="https://img2.taoshouyou.com/img/2020-10-10/17/efe807d5ef0383835ca2d41db4abe1be.jpg"
          />
        </a>
      </div>
    </div>

    <!-- 商品推荐 -->

    <div class="recommend-box">
      <div class="recommend">商品推荐</div>
      <div class="waterfallbox">
        <!-- 每一个盒子 -->
        <a
          class="item"
          v-for="(item, index) in product"
          :key="index"
          @click="linkTo(item,index)"
        >
          <div class="item-content">
            <div class="goods-img">
              <img
                :src="item.img ? item.img : require('../assets/img/noimg.png')"
                alt=""
              />
            </div>
            <div class="goods-type">
              <span>{{ item.gamename }}</span>
            </div>
            <div class="goods-info">
              <div class="goods-name">{{ item.most_origin_name }}</div>
              <div class="tag-name"></div>
              <div class="clientname">
                <span>{{ item.client_name }}</span
                ><span>{{ item.belongstoserviceareaname }}</span>
              </div>
              <div class="price">￥{{ item.price }}</div>
              <div class="seen">
                <span class="is_line">卖家{{ item.lastSellerOnline }}</span
                ><span class="seednumber">{{ item.hits }}人看过</span>
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="all-box">
        <router-link tag="span" to="list" class="all-btn"
          >查看全部游戏</router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { gamesList } from "../api/gamesList";
import { productList } from "../api/product";
import { hotGames } from "../api/hotGames";
export default {
  data() {
    return {
      current: 0,
      hotgames: [],
      product: [],
      show: false,
      i: 0,
      type: [],
      sendItme: {},
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    handlecheck(index) {
      this.$store.commit("footer/check", index);
    },
    showPopup(index) {
      this.show = true;
      this.i = index;
      this.sendItme = this.hotgames[this.i];
      let c = this.hotgames[this.i].id;

      //点击时发起请求
      hotGames(c).then((val) => {
        var a = val.data;
        this.type = a;
      });
    },
    linkTo(item) {
      let fromdata = {
        gameid: item.gameid,
        goodsid: 0,
        limtSum: null,
        maxSum: null,
        mobileid: null,
        page: 1,
        parentgoodsid: 0,
        sort: 0,
      };
      let data = JSON.stringify(fromdata);
      sessionStorage.goodData = data;

      this.$router.push(`/product/${item.id}`);
    },
    goTodeailList(item,idx) {
      sessionStorage.gamesType = this.sendItme.name;
      item.value=idx
      sessionStorage.gamesTag = JSON.stringify(item);
      this.$router.push(`detail/${this.sendItme.spelling}/${this.sendItme.id}`);
    },
  },
  computed: {
    ...mapState({
      firstlist: (state) => {
        return state.first.firstList;
      },
      first: (state) => {
        return state.first.first1;
      },
    }),
  },
  created() {
    gamesList("hot").then((val) => {
      var a = val.data.splice(0, 12);
      this.hotgames = a;
    });

    productList().then((val) => {
      var b = val.data.data.trades;
      this.product = b;
    });
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/index.css");
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 0px;
  text-align: center;
  background-color: #fff;
}
img {
  width: 100%;
  height: 90%;
  margin-top: 11px;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.clearfix {
  width: 100%;
}
.swiper-slide {
  display: inline-block;
  margin-left: 15px;
}
.van-swipe-item {
  background: #fff;
}
.tsy-ggw1-img {
  margin-left: 12px;
}
.module {
  margin-top: 0;
}
.my-swipe img{
  margin-top: 0;
}
.item-title {
  font-size: 0.16rem;
  font-weight: bold;
  background-color: #fff;
  padding: 0.1rem 0.1rem 0.13rem;
}
.van-cell {
  width: 90px;
  display: inline-block;
  margin-left: 0px;
}
#hotgames .games-content {
  width: 100%;
  margin-left: 3px;
}
.img1 {
  width: 80px;
  height: 80px;
  position: relative;
  top: -50px;
  left: 50px;
  border-radius: 12px;
}
.van-popup--bottom {
  overflow: inherit;
}
.games-type-p {
  margin-left: 50px;
  display: inline-block;
  position: relative;
  top: -62px;
  left: 40px;
}
.show1 {
  width: 30%;
  height: 60px;
  display: inline-block;
  margin-left: 10px;
  text-align: center;
}

.type-pic {
  width: 50px;
}
h3 {
  font-size: 14px;
}
</style>